<template>
  <view class="mode">
    <view
      class="mode-content"
      :style="{
        backgroundImage: `url(${oss2('funCard/text_back.png')})`,
      }"
    >
      <view class="text_title">{{ textName }}</view>
      <view class="text_content" v-html="html"></view>
      <button
        class="rule_kefu"
        open-type="contact"
        @click.stop="onlineKf"
        :style="{
          backgroundImage: `url(${oss2('funCard/kf_btn.png')})`,
        }"
      ></button>
      <view
        class="rule_close"
        @click.stop="emits('close')"
        :style="{
          backgroundImage: `url(${oss2('funCard/close.png')})`,
        }"
      >
      </view>
    </view>
  </view>
</template>
  
  <script setup>
import { oss2 } from "@/utils/utils";
import { defineProps, defineEmits, watch, ref } from "vue";
import { GetTextByKey } from "@/services/giftcard.js";

const emits = defineEmits(["close"]);
const props = defineProps({
  keyName: {
    type: String,
    default: "",
  },
});

const html = ref("");
const textName = ref("");
const textKey = {
  常见问题: "giftcard_faq",
  使用须知: "giftcard_terms_of_use",
  区域限购: "giftcard_purchase_area_policy",
};

const getHtml = async (key) => {
  const res = await GetTextByKey(key);
  if (res?.code === 200) {
    html.value = res.data.value;
  }
};

watch(
  () => props.keyName,
  () => {
    console.log("监听porps", props.keyName);
    if (props.keyName) {
      textName.value = props.keyName;
      let key = textKey[textName.value];
      getHtml(key);
    }
  },
  {
    immediate: true, // 这个属性是重点啦
  }
);
</script>
  
  <style lang="less" scoped>
.mode {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.7);
  .mode-content {
    position: absolute;
    width: 326px;
    height: 434px;
    top: calc(50vh - 255px);
    left: 24px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 326px 100%;
    .text_title {
      height: 39px;
      line-height: 39px;
      letter-spacing: 1px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      color: #0044c9;
    }
    .text_content {
      width: 288px;
      height: 300px;
      margin-left: 19px;
      margin-top: 21px;
      overflow-y: auto;
      font-size: 10px;
      color: #0353cb;
      padding-right: 19px;
    }
    .text_content::-webkit-scrollbar {
      width: 3px;
    }
    .text_content::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(0, 48, 168, 0.8);
    }
    .text_content::-webkit-scrollbar-track {
      border-radius: 2px;
      background: rgba(144, 192, 255, 0.5);
    }
    .rule_kefu {
      width: 118px;
      height: 30px;
      margin: 0 auto;
      margin-top: 24px;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 118px 100%;
      &::after {
        border: none;
      }
    }

    .rule_close {
      position: absolute;
      left: 147px;
      bottom: -50px;
      width: 30px;
      height: 30px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 30px 100%;
    }
  }
}
</style>